<template>
  <div class="app-container calendar-list-container">
    <el-table
      :key="tableKey"
      :data="list"
      v-loading.body="listLoading"
      border
      fit
      highlight-current-row
      style="width: 99%;overflow: auto; margin-top: 10px;"
    >
      <el-table-column align="center" label="推荐位排序" min-width="10%">
        <template scope="scope">
          <span>{{scope.row.indexRecommNum}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="推荐商品" min-width="10%">
        <template scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="20%">
        <template scope="scope">
          <el-button
            v-if="goodsManager_btn_edit"
            size="small"
            type="success"
            @click="handleUpdate(scope.row)"
          >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNo"
        :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>

      <el-dialog title="编辑推荐位" :visible.sync="dialogFormVisible" width="100%">
        <div class="dialog-footer">
          <el-button type="primary" @click="updatePromotionTrue">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
        <el-form :model="form">
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input v-model="form.indexRecommNum" disabled></el-input>
          </el-form-item>
          <el-form-item label="推广产品图片*" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              name="imageFile"
              :headers="requestHeader"
              :action="uploadImgUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :data="uploadParam"
            >
              <img v-if="form.promotionImage" :src="imgBaseURL +form.promotionImage" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2MB</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品*" :label-width="formLabelWidth">
            <el-select v-model="form.goodsId" clearable filterable placeholder="请选择商品">
              <el-option
                v-for="item in regionVal"
                :key="item.goodsId"
                :label="item.name"
                :value="item.goodsId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="模板说明图" :label-width="formLabelWidth">
            <img :src="src" width="570px" />
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getToken } from "utils/auth";
import {
  promotionPage,
  promotionTerm,
  getSelectByshops,
  updatePromotion
} from "api/shop/goods/goods/index";
import { getComponentById } from "api/shop/shops/index";
import globalVariable from "@/utils/global";
export default {
  name: "promotionAdManage",
  data() {
    return {
      imgBaseURL: this.GLOBAL.imgBaseURL,
      tableKey: 0,
      list: null,
      listLoading: true,
      total: null,
      goodsManager_btn_edit: false,
      dialogFormVisible: false,
      requestHeader: { token: getToken() },
      uploadImgUrl: this.GLOBAL.uploadImgUrl,
      uploadParam: { useType: "promo" },
      src: "",
      listQuery: {
        pageNo: 1,
        pageSize: 20,
        shopId: undefined,
        componentId: undefined
      },
      term: {
        shopId: undefined,
        indexRecommNum: undefined,
        promotionId: undefined
      },
      regionVal: [],
      formLabelWidth: "120px",
      form: {
        componentId: undefined,
        goodsId: undefined,
        indexRecommNum: undefined,
        promotionId: undefined,
        shopId: undefined,
        promotionImage: undefined
      }
    };
  },
  created() {
    this.getComponentinfo();
    this.goodsManager_btn_edit = this.elements["goodsManager:btn_edit"];
  },
  computed: {
    ...mapGetters(["elements"])
  },
  methods: {
    getComponentinfo() {
      this.listLoading = true;
      this.listQuery.shopId = this.$route.query.shopId;
      this.listQuery.componentId = this.$route.query.id;
      promotionPage(this.listQuery).then(response => {
        this.list = response.data.rows;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },

    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getComponentinfo();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val;
      this.getComponentinfo();
    },
    handleAvatarSuccess(res, file) {
      this.form.promotionImage = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return (isJPG || isPNG) && isLt2M;
    },
    handleUpdate(row) {
      this.dialogFormVisible = true;
      getComponentById(this.$route.query.id).then(response => {
        this.src = this.GLOBAL.imgBaseURL + response.data.componentImage;
      });
      this.term.shopId = row.shopId;
      this.term.indexRecommNum = row.indexRecommNum;
      this.term.promotionId = row.promotionId;
      promotionTerm(this.term).then(response => {
        this.form.indexRecommNum = response.data.indexRecommNum;
        this.form.promotionImage = response.data.promotionImage;
        this.form.goodsId = response.data.goodsId;
      });
      getSelectByshops(this.term.shopId).then(response => {
        this.regionVal = response.data;
      });
    },
    updatePromotionTrue() {
      this.form.shopId = this.$route.query.shopId;
      this.form.componentId = this.$route.query.id;
      this.form.promotionId = this.term.promotionId;
      if (this.form.promotionImage == "" || this.form.promotionImage == null) {
        this.$message.error("推荐位图片不能为空");
        return false;
      }
      updatePromotion(this.form).then(response => {
        if (response.message == 200) {
          this.$notify({
            title: "成功",
            message: "修改成功!",
            type: "success",
            duration: 2000
          });
          this.dialogFormVisible = false;
          this.getComponentinfo();
        } else {
          this.$notify({
            title: "失败",
            message: "数据出现异常!",
            type: "error",
            duration: 2000
          });
          this.dialogFormVisible = false;
          this.getComponentinfo();
        }
      });
    }
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
